<template>
	<om-page :title="pageTitle">
		<view class="flex justify-end padding"><om-showswitch></om-showswitch></view>
		<view class="page__bd">
			<om-wing-blank size="default">
				<view v-for="(item, index) in datas" :key="index">
					<uni-list v-if="!item.children || item.children.length == 0">
						<view v-if="item.h5Path">
							<uni-list-item v-show="hasItemVal(item)" class="padding-0" @click="onTab(item)">
								<view class="tui-flex align-center">
									<view class="tui-col-5"><om-label :label="item.name"></om-label></view>
									<view class="tui-col-7">{{ item.value }}</view>
								</view>
							</uni-list-item>
						</view>
						<view v-else>
							<uni-list-item v-show="hasItemVal(item)" class="padding-0" :showArrow="showArraw(item)"
								:showHover="false" @click="showFormala(item)">
								<view class="tui-flex align-center">
									<view class="tui-col-5"><om-label :align="'right'" :label="item.name"></om-label>
									</view>
									<view v-if="item.ispic" class="tui-col-7">
										<view v-if="item.value" class="tui-left" @tap="imageView(item.value)">
											<image :src="item.value" @load="changeImage" id="showSign" mode="widthFix"
												:style="{ height: imgHeight + 'px', width: imgWidth + 'px', border: '2px solid #ddd', 'margin-left': 0 }">
											</image>
										</view>
									</view>
									<view v-else class="tui-col-7">{{ item.value ? item.value : '' }}</view>
								</view>
							</uni-list-item>
						</view>
					</uni-list>
					<uni-collapse v-else :accordion="true">
						<uni-collapse-other-item :title="item.name" unit="" :color="'#333333'" :showLength="true"
							:text="item.value">
							<view v-for="(child,childIndex) in item.children" :key="childIndex">
								<uni-list>
									<view v-if="child.h5Path">
										<uni-list-item v-show="hasItemVal(child)" class="padding-0"
											@click="onTab(child)">
											<view class="tui-flex align-center">
												<view class="tui-col-5"><om-label :label="child.name"></om-label></view>
												<view class="tui-col-7">{{ child.value }}</view>
											</view>
										</uni-list-item>
									</view>
									<view v-else>
										<uni-list-item v-show="hasItemVal(child)" class="padding-0"
											:showArrow="showArraw(child)" :showHover="false"
											@click="showFormala(child)">
											<view class="tui-flex align-center">
												<view class="tui-col-5"><om-label :align="'right'"
														:label="child.name"></om-label></view>
												<view v-if="child.ispic" class="tui-col-7">
													<view v-if="child.value" class="tui-left"
														@tap="imageView(child.value)">
														<image :src="child.value" @load="changeImage" id="showSign"
															mode="widthFix"
															:style="{ height: imgHeight + 'px', width: imgWidth + 'px', border: '2px solid #ddd', 'margin-left': 0 }">
														</image>
													</view>
												</view>
												<view v-else class="tui-col-7">{{ child.value ? child.value : '' }}
												</view>
											</view>
										</uni-list-item>
									</view>
								</uni-list>
							</view>
						</uni-collapse-other-item>
					</uni-collapse>
				</view>
				<view v-if="isShow || hasConfirmed">
					<uni-list>
						<uni-list-item :showArrow="false">
							<view class="tui-flex align-center">
								<view class="tui-col-5"><om-label :align="'right'" label="手写签名"
										:required="true"></om-label></view>
								<view v-if="!isSign" class="tui-col-7" @click="toSignature">点击此处签名</view>
								<view v-else class="tui-col-7" @tap.stop="isComfir ? imageView(image) : toSignature()">
									<image :src="image" id="signImage" mode="widthFix"
										:style="{ height: imgHeight + 'px', width: imgWidth + 'px', border: '2px solid #ddd' }">
									</image>
								</view>
							</view>
						</uni-list-item>
					</uni-list>
				</view>

				<view v-if="tips && isShow" style="margin-left:40rpx;">*温馨提示：如对薪资核算信息有异议时，请联系{{ tips }}</view>
				<om-white-space></om-white-space>
				<om-white-space></om-white-space>
				<om-white-space></om-white-space>
				<om-white-space></om-white-space>
				<om-white-space></om-white-space>
				<om-white-space></om-white-space>
				<om-white-space></om-white-space>
				<om-button v-if="isShow" :buttons="confirmBtn" @btnChange="btnClick"></om-button>
				<om-white-space></om-white-space>
			</om-wing-blank>
		</view>
		<!-- <om-button :buttons="buttons" @btnChange="btnChange" fontSize="medium"></om-button> -->
		<om-hover-button openType="switchTab" title="返回首页" url="/pages/main/main/main"></om-hover-button>
	</om-page>
</template>

<script>
	import {
		mapState
	} from 'pinia';
	import {
		useLoginUserStore
	} from '@/stores/login-user.js'
	import {
		isEnglish,
		filterNumbers
	} from '@/static/js/common.js';
	export default {
		provide() {
			return {
				info: this,
				showAll: this.showAll
			};
		},
		data() {
			return {
				id: '',
				cacheKey: '',
				datas: [],
				pageTitle: '',
				confirmBtn: [{
					text: '确认',
					bgcolor: '#5697F4'
				}],
				showAll: false,
				isSign: false,
				hasConfirmed: false, //是否刚点击了确认过，当点击确认按钮且保存成功后，设为true
				storageKey: 'signature-key',
				image: '',
				imgHeight: '',
				imgWidth: '',
				isSmall: false,
				tips: '',
				isComfir: false,
				isShow: false, //初始进入本页，是否需要签名，true表示需要，false，不需要
				bottomTips: '请在框中书写，签名仅限于接收确认',
			};
		},
		computed: {
			...mapState(useLoginUserStore, ['hasLogin', 'forcedLogin', 'userName', 'userId', "avatar", "sexCode"
				// #ifdef MP-WEIXIN
				, 'db', 'openid', 'orgCode'
				// #endif
			]),
		},
		onLoad(options) {
			this.pageTitle = options.title || '详细信息';
			uni.setNavigationBarTitle({
				title: this.pageTitle
			});
			if (!options.id) {
				uni.navigateBack();
			}
			let _that = this
			this.id = options.id;
			if (options.cacheKey) {
				_that.cacheKey = options.cacheKey;
				uni.getStorage({
					key: options.cacheKey,
					success: function(res) {
						if (res.data) {
							_that.datas = res.data;
						}
					},
					fail() {
						console.error('获取失败');
					}
				});
			} else {
				this.om.request("salaryRoll/getDataBySalaryRollId", {
					salaryRollId: this.id
				}).then(res => {
					_that.datas = d.value;
				});
			}
		},
		onUnload() {
			uni.removeStorage({
				key: this.cacheKey
			});
		},
		onShow() {
			if (this.isSign) {
				this.showImage();
			}
			this.om.request('salaryConfirm/canConfirmById', {
				id: this.id
			}).then(res => {
				if (res.succeed) {
					this.isShow = res.value;
					if (res.value) {
						this.getAccessToken()
					}
				}
			});
		},
		methods: {
			getAccessToken() {
				let _that = this
				_that.om.getBaiduToken()
			},
			imageView(url) {
				uni.setStorage({
					key: 'image-cache',
					data: url
				});
				uni.navigateTo({
					url: '../../public/img-view/img-view'
				});
			},
			changeImage() {
				let _that = this;
				_that.$nextTick(function() {
					let signImage = uni.createSelectorQuery().select('#showSign');
					signImage
						.boundingClientRect(data => {
							if (!_that.isSmall) {
								_that.imgHeight = data.height / 3;
								_that.imgWidth = data.width / 3;
								_that.isSmall = !_that.isSmall;
							}
						})
						.exec();
				});
			},
			showImage() {
				let _that = this;
				try {
					const value = uni.getStorageSync(_that.storageKey);
					if (value) {
						_that.image = value;
						_that.$nextTick(() => {
							let signImage = uni.createSelectorQuery().select('#signImage');
							signImage
								.boundingClientRect(data => {
									if (!_that.isSmall) {
										_that.imgWidth = data.width * 0.9;
										_that.isSmall = !_that.isSmall;
									}
								})
								.exec();
						});
						uni.removeStorageSync(_that.storageKey);
					}
				} catch (e) {
					// error
				}
			},
			btnClick() {
				let _that = this;
				if (!_that.image) {
					if (isEnglish(_that.userName)) {
						uni.navigateTo({
							url: "../../public/signature/signature?goToOld=" + true
						})
					} else {
						let signName = filterNumbers(_that.userName)
						uni.navigateTo({
							url: "../../public/signature/signature?bottomTips=" + _that.bottomTips + '&userName=' +
								signName
						})
					}
					return;
				}
				_that.om
					.request(
						'salaryConfirm/doSalaryConfirm', {
							signature: _that.image,
							id: _that.id
						},
						'post'
					)
					.then(res => {
						if (!res.succeed) {
							_that.om.toast(res.msg, 3000);
						} else {
							_that.om.toast('确认成功');
							_that.isShow = false;
							_that.hasConfirmed = true;
							_that.tips = '';
							_that.isComfir = true;
						}
					});
			},
			toSignature() {
				let _that = this
				if (!_that.hasConfirmed) {
					if (isEnglish(_that.userName)) {
						uni.navigateTo({
							url: "../../public/signature/signature?goToOld=" + true
						})
					} else {
						let signName = filterNumbers(_that.userName)
						uni.navigateTo({
							url: "../../public/signature/signature?bottomTips=" + _that.bottomTips + '&userName=' +
								signName
						})
					}
				}
			},
			showArraw(item) {
				if (item.attr) {
					if (item.attr.autoFlag) {
						return true;
					} else {
						return false;
					}
				} else {
					return false;
				}
			},
			hasItemVal(item) {
				if (!this.showAll) {
					if (item.value) {
						return true;
					} else {
						return false;
					}
				} else {
					return true;
				}
			},
			onTab(item) {
				if (item.h5Path) {
					if (item.attr && item.attr.infoShow) {
						uni.setStorage({
							key: 'cacheAttr',
							data: item.attr.infoShow
						});
					}
					uni.navigateTo({
						url: item.h5Path + '?cacheKey=cacheAttr'
					});
				}
			},
			btnChange(index) {
				var button = this.buttons[index];
				if (button.link) {
					uni.navigateTo({
						url: button.link
					});
				}
			},
			showFormala(item) {
				var attr = item.attr;
				if (attr.autoFlag) {
					uni.navigateTo({
						url: "salaryroll-formula?columnId=" + attr.tableColumnId + "&customId=" + attr.customId +
							"&posId=" + attr.posId
					})
				}
			}
		}
	};
</script>

<style></style>